<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin: auto;
            text-align: center;
        }
    </style>
    <script src="js/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 加减计数器 -->
        <p>{{NumCount}}</p>
        <button @click="count++,NumCount++">点击+1</button>
        <p>点击次数：{{count}}</p><br>
        <button @click="times++,NumCount--">点击-1</button>
        <p>点击次数：{{times}}</p>
        <my-button></my-button>
        <my-button></my-button>
    </div>
    <script>
        //定义组件
        const myCountButton = Vue.defineComponent({
            data() {
                return {
                    NumCount: 0,
                    count: 0,
                    times: 0
                } 
            },
            template: `<button @click="count++,NumCount++">点击+1</button>
        <p>点击次数：{{count}}</p><br>`
        })
        Vue.createApp({
            components: {//注册组件
                'my-button':myCountButton
            },
            data() {
                return {
                    NumCount: 0,
                    count: 0,
                    times: 0
                }
            }
        }).mount("#app")
    </script>
</body>

</html>